<template>
  <div id="">

    <el-row :gutter="20">
      <el-col :span='8'>
        <el-input placeholder="请输入内容" v-model="listQuery.querys">
          <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <div id="">
         <el-row>
           <el-button type="primary"  @click="add">添加</el-button>
         </el-row>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="入库单号" width="100">
      </el-table-column>
      <el-table-column prop="goods_img" label="商品图片" width="100">
        <template v-slot:default="scope">
          <el-image :src="scope.row.goods_img" />
        </template>
      </el-table-column>
     <el-table-column prop="goods_names" label="商品名称">
      </el-table-column>
      <el-table-column prop="goods_specification" label="商品规格">
      </el-table-column>
      <el-table-column prop="goods_serial" label="商品编号">
      </el-table-column>
      <el-table-column prop="warehouse_name" label="仓库名称">
      </el-table-column>
      <el-table-column prop="id" label="入库单号">
      </el-table-column>
      <el-table-column prop="goods_num" label="数量">
      </el-table-column>
      <el-table-column prop="created_at" label="入库时间">
      </el-table-column>
      <el-table-column label="门店状态" prop="warehouse_status" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.warehouse_status" :active-value="1" :inactive-value="2"
            @change="switchChange($event, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="提示" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="form" >
        <el-form-item label="商品图片" >
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">图片上传</i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" >
          <el-input v-model="form.goods_specification" />
        </el-form-item>
        <el-form-item label="商品规格" >
          <el-input v-model="form.goods_serial"  />
        </el-form-item>
        <el-form-item label="商品编号" >
          <el-input v-model="form.warehouse_name"  />
        </el-form-item>
        <el-form-item label="仓库名称" >
          <el-input v-model="form.warehouse_name"  />
        </el-form-item>
        <el-form-item label="数量" >
          <el-input v-model="form.goods_num"  />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    shopList,delShop
  } from "@/api/warehouse"

  export default {
    data() {
      return {
        dialogFormVisible:false,
        dialogStatus:'',
        tableData: [],
        listQuery: {
          querys: "",
        },
        form:{
          nickname:'',
          comment:'',
        },
      }
    },
    created() {
      this.getData();
    },
    methods: {
      //列表
      getData() {
        shopList(this.listQuery).then(res => {
          if (res.code == 20000) {
            this.tableData = res.data
          }
        })
      },
      // 修改
      handleEdit(index, row) { // 修改方法
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      },
      // 跳出弹窗
      add(){
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      // 文件
      handleAvatarSuccess(file){

      },

      // 重置
      resetForm() {

      },
      // 添加
      createData(){
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        this.dialogFormVisible = false
      },
      // 添加
      updateData(){
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          this.dialogFormVisible = false
      },
      // 删除
      handleDelete(index, row) { // 执行后端 删除方法
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delShop(row.id);
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style>
</style>
